<template>
  <div class="created-activities">
    <van-nav-bar
      title="我发布的活动"
      left-arrow
      @click-left="router.back()"
      fixed
    />
    
    <div class="content">
      <van-tabs v-model:active="activeTab">
        <van-tab title="全部">
          <activity-list 
            :activities="activities" 
            :loading="loading" 
            @activity-click="goToDetail" 
          />
        </van-tab>
        <van-tab title="进行中">
          <activity-list 
            :activities="ongoingActivities" 
            :loading="loading" 
            @activity-click="goToDetail" 
          />
        </van-tab>
        <van-tab title="已结束">
          <activity-list 
            :activities="finishedActivities" 
            :loading="loading" 
            @activity-click="goToDetail" 
          />
        </van-tab>
      </van-tabs>
      
      <van-empty v-if="!loading && activities.length === 0" description="暂无发布的活动" />
      
      <div class="action-button">
        <van-button type="primary" block icon="plus" @click="router.push('/publish')">
          发布新活动
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { activityApi } from '@/api/activity';
import ActivityList from '@/components/activity/ActivityList.vue';

const router = useRouter();
const activities = ref([
  {
    id: 6,
    title: '九溪烟树骑行',
    location: '杭州市西湖区',
    startTime: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000), // 10天后
    endTime: new Date(Date.now() + 11 * 24 * 60 * 60 * 1000),
    feeMode: 'FREE',
    currentParticipants: 2,
    maxParticipants: 15,
    cover: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    difficultyLevel: 'MEDIUM'
  },
  {
    id: 7,
    title: '径山骑行',
    location: '杭州市余杭区',
    startTime: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000), // 5天后
    endTime: new Date(Date.now() + 6 * 24 * 60 * 60 * 1000),
    feeMode: 'FREE',
    currentParticipants: 4,
    maxParticipants: 12,
    cover: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    difficultyLevel: 'HARD'
  },
  {
    id: 8,
    title: '湘湖骑行',
    location: '杭州市萧山区',
    startTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000), // 10天前
    endTime: new Date(Date.now() - 9 * 24 * 60 * 60 * 1000),
    feeMode: 'FREE',
    currentParticipants: 8,
    maxParticipants: 15,
    cover: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    difficultyLevel: 'EASY'
  }
]);
const activeTab = ref(0);
const loading = ref(false);
const refreshing = ref(false);

// 根据活动状态过滤
const ongoingActivities = computed(() => {
  return activities.value.filter(activity => {
    const now = new Date();
    const endTime = new Date(activity.endTime);
    return endTime > now;
  });
});

const finishedActivities = computed(() => {
  return activities.value.filter(activity => {
    const now = new Date();
    const endTime = new Date(activity.endTime);
    return endTime <= now;
  });
});

// 获取活动列表
const fetchActivities = async () => {
  loading.value = true;
  try {
    const response = await activityApi.getUserCreatedActivities();
    if (response && response.data && response.data.list) {
      activities.value = response.data.list;
    } else {
      activities.value = [];
    }
  } catch (error) {
    console.error('获取活动列表失败:', error);
    showToast('获取活动列表失败');
  } finally {
    loading.value = false;
  }
};

// 下拉刷新
const onRefresh = async () => {
  try {
    await fetchActivities();
    showToast('刷新成功');
  } catch (error) {
    console.error('刷新失败:', error);
    showToast('刷新失败');
  } finally {
    refreshing.value = false;
  }
};

onMounted(() => {
  fetchActivities();
});

const goToDetail = (id) => {
  router.push(`/activity/detail/${id}`);
};
</script>

<style scoped>
.created-activities {
  padding-top: 46px;
  padding-bottom: 20px;
  min-height: 100vh;
  background-color: #f7f8fa;
}

.content {
  padding: 16px;
}

.van-tabs {
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.action-button {
  margin-top: 24px;
}

.van-button {
  border-radius: 8px;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
}
</style>
